<template>
    <div class="app-container">
        <el-card shadow="always">
            <el-form :model="queryParams" :inline="true" label-width="100px">
                <el-form-item label="数据名称" prop="dataName">
                    <el-input v-model="queryParams.dataName" clearable placeholder="请输入数据名称" style="width: 240px" />
                </el-form-item>
                <el-form-item label="网络制式：" prop="networkType">
                    <el-select v-model="queryParams.networkType" placeholder="请选择网络制式" style="width: 240px">
                        <el-option v-for="dict in nhp_network_type" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态：" prop="status">
                    <el-select v-model="queryParams.status" placeholder="请选择数据状态" style="width: 240px">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="listCellInfoList">查询</el-button>
                    <el-button @click="unsetQueryForm"><el-icon>
                            <RefreshRight />
                        </el-icon>重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card shadow="always" style="margin-top: 10px;min-height: 500px;padding-bottom: 20px;">
            <div id="table" style="margin-top: 20px;">
                <el-table v-loading="loading" ref="cellInfoTable" :data="tableData" style="width: 100%">
                    <el-table-column label="序号" type="index" width="50" align="center" />
                    <el-table-column label="数据标识" prop="dataId" width="200" align="center" />
                    <el-table-column label="数据名称" prop="dataName" width="250" align="center" />
                    <el-table-column label="网络制式" prop="networkType" width="80" align="center" />
                    <el-table-column label="数据来源" prop="source" width="80" align="center" />
                    <el-table-column label="同步周期" prop="period" width="80" align="center" />
                    <el-table-column label="最新数据时间" prop="lastDataTime" :formatter="dateFormatter" width="120"
                        align="center" />
                    <el-table-column label="最早数据时间" prop="startTime" :formatter="dateFormatter" width="120"
                        align="center" />
                    <el-table-column label="状态" prop="status" width="80" align="center">
                        <template #default="scope">
                            <el-tag :type="formatStatus(scope.row.status)" disable-transitions>{{
                                scope.row.status }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="remark" width="100" align="center" />
                    <el-table-column fixed="right" label="操作" min-width="120" align="center">
                        <template #default="scope">
                            <el-button link type="primary" size="small"
                                @click="showDetailDialog(scope.row)">同步记录</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 50, 100, 200]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next" :total="total" @size-change="listCellInfoList"
                    @current-change="listCellInfoList" />
            </div>
        </el-card>
        <el-dialog v-model="detailTableVisible" :title="title" width="900" @closed="closeDetailDialog">
            <el-table :data="recordTableData" style="width: 100%">
                <el-table-column label="ID" prop="id" width="50" align="center" />
                <el-table-column label="数据标识" prop="dataId" width="200" align="center" />
                <el-table-column label="创建时间" prop="createTime" :formatter="dateFormatter" width="250" align="center" />
                <el-table-column label="状态" prop="status" width="80" align="center">
                    <template #default="scope">
                        <el-tag :type="formatStatus(scope.row.status)" disable-transitions>{{
                            scope.row.status }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="数据量" prop="dataCount" width="80" align="center" />
                <el-table-column label="备注" prop="remark" align="center" />
            </el-table>
            <el-pagination v-model:current-page="recordCurrentPage" v-model:page-size="recordPageSize"
                :page-sizes="[10, 50, 100, 200]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next" :total="recordTotal" @size-change="listRecordList"
                @current-change="listRecordList" />
        </el-dialog>

    </div>
</template>

<script setup name="dataMonitor">
const { proxy } = getCurrentInstance();
import { ref } from 'vue'
import { queryDataMonitorConfigList, queryDataMonitorRecordList } from '@/api/biz/monitor'
const { nhp_county_type, nhp_network_type } = proxy.useDict(
    "nhp_county_type",
    "nhp_network_type"
);

const queryParams = ref({})
const tableData = ref([])
const pageSize = ref(10)
const currentPage = ref(1)
const total = ref(0)
const detailTableVisible = ref(false)
const recordTableData = ref([])
const recordPageSize = ref(10)
const recordCurrentPage = ref(1)
const recordTotal = ref(0)
const currentDataId = ref()

const title = ref('同步记录列表')



const statusOptions = [
    {
        value: "正常",
        label: '正常',
    },
    {
        value: "异常",
        label: '异常',
    },
]

function listCellInfoList() {
    const param = {}
    param.pageSize = pageSize.value;
    param.pageNum = currentPage.value;
    param.networkType = queryParams.value.networkType;
    queryDataMonitorConfigList(param).then(res => {
        tableData.value = res.rows
        total.value = res.total;
    })
}

function dateFormatter(row, column, cellValue, index) {
    if (!cellValue) { return }
    // 创建一个新的 Date 对象
    var originalDate = new Date(cellValue);

    // 获取年、月、日、时、分、秒
    var year = originalDate.getFullYear();
    var month = ("0" + (originalDate.getMonth() + 1)).slice(-2);
    var day = ("0" + originalDate.getDate()).slice(-2);
    var hours = ("0" + originalDate.getHours()).slice(-2);
    var minutes = ("0" + originalDate.getMinutes()).slice(-2);
    var seconds = ("0" + originalDate.getSeconds()).slice(-2);

    // 格式化输出
    var formattedDateTimeString = year + "-" + month + "-" + day;
    return formattedDateTimeString;
}

function formatStatus(status) {
    if (status == '正常') {
        return "success";
    } else if (status == '异常') {
        return "danger";
    }
}

function showDetailDialog(row) {
    let param = {
        dataId: row.dataId
    }
    title.value = "数据同步记录-" + row.dataName
    currentDataId.value = row.dataId
    queryDataMonitorRecordList(param).then(res => {
        detailTableVisible.value = true
        recordTableData.value = res.rows
        recordTotal.value = res.total;
    })
}

function listRecordList() {
    const param = {}
    param.pageSize = recordPageSize.value;
    param.pageNum = recordCurrentPage.value;
    param.dataId = currentDataId.value;
    queryDataMonitorConfigList(param).then(res => {
        tableData.value = res.rows
        total.value = res.total;
    })
}

function closeDetailDialog() {
    detailTableVisible.value = false
    recordTableData.value = []
}


listCellInfoList()


</script>
